<template>
<el-row style="height: 80px;line-height: 80px;padding-right: 20px">
  <el-col :span="12"><img src="../../../../static/img/logo.png" alt=""></el-col>
  <el-col :span="12" style="text-align: right;font-size: 14px">您好，<mark>{{myInfo.username}}</mark> 可用余额：<span style="color:red;">{{myInfo.balance}}</span> |
    <span class="logout" @click="logout">退出</span></el-col>
</el-row>
</template>

<script>
  export default {
    data () {
      return {
      }
    },
    created () {
      this.getMyInfo()
    },
    computed: {
      myInfo () {
        return this.$store.state.myInfo
      }
    },
    methods: {
      logout () {
        this.$confirm('您确定要退出登录吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.logout().then(res => {
            if (res.code === '000000') {
              this.$message({
                type: 'success',
                message: '退出成功!'
              })
              window.sessionStorage.setItem("loginStatus", '')
              this.$router.push('/')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
      },
      getMyInfo () {
        this.$api.getMyInfo().then(res => {
          if (res.code === '000000') {
            this.$store.commit('myInfo', res.data)
          }
        })
      }
    }

  }
</script>

<style lang="less" scoped>
.logout{
  cursor: pointer;
}
</style>
